<template>
  <el-dialog
    v-el-drag-dialog="{resize: resize, updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :title="$t('MONITOR')"
    :visible="dialogVisible"
    append-to-body
    @close="close"
  >
    <div id="alarmImageBox" class="flex flex-column">
      <div class="flex justify-end mb-10" style="width: 100%">
        <span class="text-light-muted">{{
          alarmImageList[currentIndex] &&
            alarmImageList[currentIndex].captureTime
        }}</span>
      </div>
      <div class="flex-1">
        <el-carousel
          v-if="alarmImageList.length"
          class="h-100"
          height="400px"
          :autoplay="false"
          indicator-position="none"
          @change="carouselChange"
        >
          <el-carousel-item v-for="item in imageUrlList" :key="item.src">
            <el-image
              class="h-100"
              style="width: 100%;"
              :src="item.src"
              fit="fill"
              :preview-src-list="[item.src]"
            >
              <div slot="error" class="h-100 flex align-center justify-center">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </el-carousel-item>
        </el-carousel>
        <div v-else class="flex align-center h-100 justify-center">
          {{ $t('NO_DATA') }}
        </div>
      </div>
      <div
        v-if="alarmImageList.length"
        class="flex justify-center"
        style="width: 100%"
      >
        <span class="text-light-muted">{{
          $t("ALARM_IMAGE_CAROUSEL_TIP", {
            msg1: alarmImageList.length,
            msg2: currentIndex + 1,
          })
        }}</span>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        :disabled="!alarmImageList.length"
        @click="download(alarmImageList[currentIndex].attach)"
      >{{ $t("DOWNLOAD") }}</el-button>
      <el-button @click="close">{{ $t("CLOSE") }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import AlarmRecordApi from '@/api/basebiz/AlarmRecordApi'
  import { downloadUrl, downloadZip } from '@/service/util.js'
  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      params: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        alarmImageList: [],
        imageUrlList: [],
        currentIndex: 0
      }
    },
    mounted() {
      this.getImage()
    },
    methods: {
      close() {
        this.$emit('update:dialogVisible', false)
      },
      carouselChange(currentIndex, prevIndex) {
        this.currentIndex = currentIndex
      },
      getImage() {
        AlarmRecordApi.alarmImageList({ alarmId: this.params.alarmId })
          .then((res) => {
            if (!res) return
            this.alarmImageList = res
            this.alarmImageList.forEach((i) => {
              this.imageUrlList.push({
                name: i.attach.name,
                src: downloadUrl(i.attach)
              })
            })
          })
          .catch(() => {})
      },
      download(attach) {
        this.$confirm('', this.$t('DOWNLOAD_MONITOR_PHOTO'), {
          distinguishCancelAndClose: true,
          confirmButtonText: this.$t('DOWNLOAD_ALL_PHOTO'),
          cancelButtonText: this.$t('DOWNLOAD_CURRENT_PHOTO')
        }).then(() => {
          downloadZip(this.imageUrlList, `${this.params.alarmTypeText}-${this.$t('MONITOR_PHOTO')}`)
        }).catch(action => {
          if (action === 'cancel') this.$download(attach)
        })
      },
      resize() {
        // document.getElementById('alarmImageBox').style.height =
        //   document.getElementById('alarmImageBox').parentNode.offsetHeight - 50 + 'px'
      }
    }
  }
</script>
<style lang="scss" scoped>
#alarmImageBox {
  ::v-deep .el-carousel__container {
    min-height: 300px;
    height: 100%;
  }
}
</style>
